<template>
  <div class="cockpit-settings">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">⚙️ 驾驶舱配置</span>
          <el-button type="primary" @click="handleSave">
            <el-icon><Select /></el-icon>
            保存配置
          </el-button>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 指标配置 -->
        <el-tab-pane label="指标配置" name="kpi">
          <div class="config-section">
            <div class="section-header">
              <h3>KPI指标配置</h3>
              <el-button type="primary" size="small" @click="handleAddKPI">
                <el-icon><Plus /></el-icon>
                添加指标
              </el-button>
            </div>

            <el-table :data="kpiConfig" border>
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column prop="name" label="指标名称" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.name" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="key" label="指标标识" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.key" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="type" label="数据类型" width="120">
                <template #default="{ row }">
                  <el-select v-model="row.type" size="small">
                    <el-option label="数值" value="number" />
                    <el-option label="货币" value="currency" />
                    <el-option label="百分比" value="percentage" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" width="100">
                <template #default="{ row }">
                  <el-input v-model="row.unit" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="color" label="颜色" width="120">
                <template #default="{ row }">
                  <el-color-picker v-model="row.color" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="icon" label="图标" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.icon" size="small" placeholder="图标名称" />
                </template>
              </el-table-column>
              <el-table-column prop="enabled" label="启用状态" width="100">
                <template #default="{ row }">
                  <el-switch v-model="row.enabled" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="150" fixed="right">
                <template #default="{ $index }">
                  <el-button link type="primary" @click="handleMoveUp($index)">上移</el-button>
                  <el-button link type="primary" @click="handleMoveDown($index)">下移</el-button>
                  <el-button link type="danger" @click="handleDeleteKPI($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 图表配置 -->
        <el-tab-pane label="图表配置" name="chart">
          <div class="config-section">
            <div class="section-header">
              <h3>图表展示配置</h3>
            </div>

            <el-form label-width="120px">
              <el-form-item label="默认时间范围">
                <el-radio-group v-model="chartConfig.defaultPeriod">
                  <el-radio label="today">今日</el-radio>
                  <el-radio label="week">本周</el-radio>
                  <el-radio label="month">本月</el-radio>
                  <el-radio label="year">本年</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="图表主题">
                <el-radio-group v-model="chartConfig.theme">
                  <el-radio label="light">浅色</el-radio>
                  <el-radio label="dark">深色</el-radio>
                  <el-radio label="auto">自动</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="图表动画">
                <el-switch v-model="chartConfig.animation" />
              </el-form-item>

              <el-form-item label="数据刷新间隔">
                <el-select v-model="chartConfig.refreshInterval">
                  <el-option label="10秒" :value="10" />
                  <el-option label="30秒" :value="30" />
                  <el-option label="1分钟" :value="60" />
                  <el-option label="5分钟" :value="300" />
                  <el-option label="手动刷新" :value="0" />
                </el-select>
              </el-form-item>

              <el-form-item label="启用的图表">
                <el-checkbox-group v-model="chartConfig.enabledCharts">
                  <el-checkbox label="salesTrend">销售趋势</el-checkbox>
                  <el-checkbox label="productPie">产品占比</el-checkbox>
                  <el-checkbox label="regionMap">区域分布</el-checkbox>
                  <el-checkbox label="incomeExpense">收支对比</el-checkbox>
                  <el-checkbox label="topProducts">产品排行</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 预警配置 -->
        <el-tab-pane label="预警配置" name="alert">
          <div class="config-section">
            <div class="section-header">
              <h3>预警规则配置</h3>
              <el-button type="primary" size="small" @click="handleAddAlert">
                <el-icon><Plus /></el-icon>
                添加规则
              </el-button>
            </div>

            <el-table :data="alertConfig" border>
              <el-table-column type="index" label="序号" width="60" />
              <el-table-column prop="name" label="规则名称" width="150">
                <template #default="{ row }">
                  <el-input v-model="row.name" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="metric" label="监控指标" width="150">
                <template #default="{ row }">
                  <el-select v-model="row.metric" size="small">
                    <el-option label="销售额" value="sales" />
                    <el-option label="订单量" value="orders" />
                    <el-option label="库存" value="stock" />
                    <el-option label="访问量" value="visits" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="condition" label="条件" width="120">
                <template #default="{ row }">
                  <el-select v-model="row.condition" size="small">
                    <el-option label="大于" value="gt" />
                    <el-option label="小于" value="lt" />
                    <el-option label="等于" value="eq" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="threshold" label="阈值" width="120">
                <template #default="{ row }">
                  <el-input-number v-model="row.threshold" size="small" />
                </template>
              </el-table-column>
              <el-table-column prop="level" label="预警级别" width="120">
                <template #default="{ row }">
                  <el-select v-model="row.level" size="small">
                    <el-option label="提醒" value="info" />
                    <el-option label="警告" value="warning" />
                    <el-option label="严重" value="danger" />
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="enabled" label="启用" width="80">
                <template #default="{ row }">
                  <el-switch v-model="row.enabled" />
                </template>
              </el-table-column>
              <el-table-column label="操作" width="100">
                <template #default="{ $index }">
                  <el-button link type="danger" @click="handleDeleteAlert($index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>

        <!-- 显示配置 -->
        <el-tab-pane label="显示配置" name="display">
          <div class="config-section">
            <div class="section-header">
              <h3>界面显示配置</h3>
            </div>

            <el-form label-width="120px">
              <el-form-item label="布局模式">
                <el-radio-group v-model="displayConfig.layout">
                  <el-radio label="grid">网格布局</el-radio>
                  <el-radio label="flex">弹性布局</el-radio>
                  <el-radio label="custom">自定义</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="主题色">
                <el-color-picker v-model="displayConfig.primaryColor" />
              </el-form-item>

              <el-form-item label="显示时间">
                <el-switch v-model="displayConfig.showTime" />
              </el-form-item>

              <el-form-item label="显示天气">
                <el-switch v-model="displayConfig.showWeather" />
              </el-form-item>

              <el-form-item label="显示通知">
                <el-switch v-model="displayConfig.showNotification" />
              </el-form-item>

              <el-form-item label="数据精度">
                <el-input-number v-model="displayConfig.precision" :min="0" :max="4" />
              </el-form-item>

              <el-form-item label="启用动画">
                <el-switch v-model="displayConfig.enableAnimation" />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>

        <!-- 数据源配置 -->
        <el-tab-pane label="数据源" name="datasource">
          <div class="config-section">
            <div class="section-header">
              <h3>数据源配置</h3>
              <el-button type="primary" size="small" @click="handleTestConnection">
                <el-icon><Connection /></el-icon>
                测试连接
              </el-button>
            </div>

            <el-form label-width="120px">
              <el-form-item label="数据源类型">
                <el-select v-model="datasourceConfig.type">
                  <el-option label="API接口" value="api" />
                  <el-option label="数据库" value="database" />
                  <el-option label="WebSocket" value="websocket" />
                  <el-option label="Mock数据" value="mock" />
                </el-select>
              </el-form-item>

              <el-form-item label="API地址" v-if="datasourceConfig.type === 'api'">
                <el-input v-model="datasourceConfig.apiUrl" placeholder="https://api.example.com" />
              </el-form-item>

              <el-form-item label="认证方式">
                <el-select v-model="datasourceConfig.authType">
                  <el-option label="无需认证" value="none" />
                  <el-option label="Bearer Token" value="bearer" />
                  <el-option label="API Key" value="apikey" />
                </el-select>
              </el-form-item>

              <el-form-item label="Token" v-if="datasourceConfig.authType !== 'none'">
                <el-input 
                  v-model="datasourceConfig.token" 
                  type="password" 
                  show-password 
                  placeholder="请输入Token"
                />
              </el-form-item>

              <el-form-item label="超时时间(秒)">
                <el-input-number v-model="datasourceConfig.timeout" :min="5" :max="60" />
              </el-form-item>

              <el-form-item label="缓存时间(秒)">
                <el-input-number v-model="datasourceConfig.cacheTime" :min="0" :max="300" />
              </el-form-item>
            </el-form>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Select, Connection } from '@element-plus/icons-vue'

const activeTab = ref('kpi')

// KPI配置
const kpiConfig = reactive([
  { name: '今日销售额', key: 'today_sales', type: 'currency', unit: '元', color: '#409eff', icon: 'Wallet', enabled: true },
  { name: '今日订单数', key: 'today_orders', type: 'number', unit: '单', color: '#67c23a', icon: 'ShoppingCart', enabled: true },
  { name: '活跃用户', key: 'active_users', type: 'number', unit: '人', color: '#e6a23c', icon: 'User', enabled: true },
  { name: '访问量', key: 'page_views', type: 'number', unit: '次', color: '#f56c6c', icon: 'TrendCharts', enabled: true }
])

// 图表配置
const chartConfig = reactive({
  defaultPeriod: 'today',
  theme: 'auto',
  animation: true,
  refreshInterval: 30,
  enabledCharts: ['salesTrend', 'productPie', 'regionMap', 'incomeExpense', 'topProducts']
})

// 预警配置
const alertConfig = reactive([
  { name: '库存不足预警', metric: 'stock', condition: 'lt', threshold: 50, level: 'warning', enabled: true },
  { name: '销售额异常', metric: 'sales', condition: 'lt', threshold: 10000, level: 'danger', enabled: true },
  { name: '访问量激增', metric: 'visits', condition: 'gt', threshold: 10000, level: 'info', enabled: true }
])

// 显示配置
const displayConfig = reactive({
  layout: 'grid',
  primaryColor: '#409eff',
  showTime: true,
  showWeather: true,
  showNotification: true,
  precision: 2,
  enableAnimation: true
})

// 数据源配置
const datasourceConfig = reactive({
  type: 'api',
  apiUrl: 'https://api.example.com/cockpit',
  authType: 'bearer',
  token: '',
  timeout: 30,
  cacheTime: 60
})

// 添加KPI
const handleAddKPI = () => {
  kpiConfig.push({
    name: '新指标',
    key: 'new_kpi',
    type: 'number',
    unit: '',
    color: '#409eff',
    icon: 'Document',
    enabled: true
  })
}

// 删除KPI
const handleDeleteKPI = (index) => {
  kpiConfig.splice(index, 1)
}

// 上移
const handleMoveUp = (index) => {
  if (index > 0) {
    const temp = kpiConfig[index]
    kpiConfig[index] = kpiConfig[index - 1]
    kpiConfig[index - 1] = temp
  }
}

// 下移
const handleMoveDown = (index) => {
  if (index < kpiConfig.length - 1) {
    const temp = kpiConfig[index]
    kpiConfig[index] = kpiConfig[index + 1]
    kpiConfig[index + 1] = temp
  }
}

// 添加预警
const handleAddAlert = () => {
  alertConfig.push({
    name: '新预警规则',
    metric: 'sales',
    condition: 'lt',
    threshold: 0,
    level: 'info',
    enabled: true
  })
}

// 删除预警
const handleDeleteAlert = (index) => {
  alertConfig.splice(index, 1)
}

// 测试连接
const handleTestConnection = () => {
  ElMessage.success('连接测试成功')
}

// 保存配置
const handleSave = () => {
  const config = {
    kpi: kpiConfig,
    chart: chartConfig,
    alert: alertConfig,
    display: displayConfig,
    datasource: datasourceConfig
  }
  console.log('保存配置:', config)
  ElMessage.success('配置保存成功')
}
</script>

<style scoped>
.cockpit-settings {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.config-section {
  padding: 20px 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
</style>

